<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spd" tagdir="/WEB-INF/tags/admin/"%>
<spd:layout>

<jsp:attribute name="head">
<!-- html的头部内容，如title、css等。 -->
<title>系统用户</title>
<style type="text/css">
.spd-avatar .file-preview-frame,.spd-avatar .file-preview-frame:hover {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    text-align: center;
}
</style>
</jsp:attribute>

<jsp:attribute name="body">
<!-- 页面的主要内容 -->
<div class="row">
	<div class="col-md-12">
		<!--box-->
		<div class="box box-primary">
			<div class="box-body">
				<form class="form-inline" id="formSearch">
					<div class="form-group">
						<input class="form-control" type="text" name="loginName" placeholder="登录名" style="width:180px;">
					</div>
					<div class="form-group">
						<input class="form-control" type="text" name="truename" placeholder="真实姓名" style="width:180px;">
					</div>
					<div class="form-group">
						<select class="form-control" name="status" style="width:180px;">
							<option value="">--用户状态--</option>
							<option value="1">正常</option>
							<option value="0">已禁用</option>
						</select>
					</div>
					<div class="form-group">
						<input class="form-control" type="text" name="sysDeptName" placeholder="所属部门" style="width:180px;">
						<input type="hidden" name="sysDeptId">
					</div>
					<div class="form-group">
						<select class="form-control" name="sysRoleId" style="width:180px;">
							<option value="">--用户角色--</option>
						</select>
					</div>
				</form>
				<!-- /form -->				
			</div>
			<!-- /.box-body -->
			<div class="box-footer">
				<div class="btn-group">
					<button class="btn btn-primary" id="btnSearch" style="width:110px">查询</button>
				</div>
				<div class="btn-group">
					<button class="btn btn-success" id="btnAdd" style="width:110px">添加用户</button>
				</div>				
			</div>
			<!-- /.box-footer -->
		</div>
		<!-- /.box -->
	</div>
</div>
<!-- /.row -->

<div class="row">
	<div class="col-md-12">
		<div class="box box-primary">
			<div class="box-body no-padding">
				<table id="table"></table>
				<!-- /#table -->
			</div>
			<!-- /.box-body -->
		</div>	
	</div>
</div>
<!-- /.row -->
</jsp:attribute>

<jsp:attribute name="dialog">
<!-- 页面的dialog，注意不能放到body中 -->

<form id="formAdd">
	<table class="table table-bordered spd-table">
		<tbody>
			<tr>
				<td style="width: 100px;"><label class="spd-label">登录名</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="loginName" placeholder="必填，不超过30个字，登录名填写后不能修改。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">真实姓名</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="truename" placeholder="必填，不超过20个字。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">密码</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="password" name="password" placeholder="必填，长度6~30个字符。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">确认密码</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="password" name="confirmPwd" placeholder="">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">所属部门</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="sysDeptName" placeholder="请选择部门">
						<input type="hidden" name="sysDeptId">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">状态</label></td>
				<td>
					<div class="spd-validate">
						<select class="form-control" name="status">
							<option value="1">正常</option>
							<option value="0">禁用</option>
						</select>
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">手机号</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="phone" placeholder="选填">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">邮箱</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="email" placeholder="选填">
					</div>
				</td>
			</tr>
			<tr>
				<td style="vertical-align:top;"><label class="spd-label">头像</label></td>
				<td>
					<div class="spd-validate">
						<div class="spd-upload-headimgurl"></div>
					</div>
					<input type="hidden" name="headimgurl" value="">
				</td>
			</tr>
		</tbody>
	</table>
</form>
<!-- /#formAdd -->


<form id="formEdit">
	<input type="hidden" name="id">
	<table class="table table-bordered spd-table">
		<tbody>
			<tr>
				<td style="width: 100px;"><label class="spd-label">登录名</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="loginName" placeholder="必填，不超过30个字，登录名填写后不能修改。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">真实姓名</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="truename" placeholder="必填，不超过20个字。">
					</div>
				</td>
			</tr>			
			<tr>
				<td><label class="spd-label">所属部门</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="sysDeptName" placeholder="请选择部门">
						<input type="hidden" name="sysDeptId">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">状态</label></td>
				<td>
					<div class="spd-validate">
						<select class="form-control" name="status">
							<option value="1">正常</option>
							<option value="0">禁用</option>
						</select>
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">手机号</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="phone" placeholder="选填">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">邮箱</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="email" placeholder="选填">
					</div>
				</td>
			</tr>
			<tr>
				<td style="vertical-align:top;"><label class="spd-label">头像</label></td>
				<td>
					<div class="spd-validate">
						<div class="spd-upload-headimgurl"></div>
					</div>
					<input type="hidden" name="headimgurl" value="">
				</td>
			</tr>
		</tbody>
	</table>
</form>
<!-- /#formEdit -->


<div id="dialogSysDept">
	<ul id="sysDeptTree" class="ztree" style="width:100%;height:100%;overflow:auto;"></ul>
</div>
<!-- /#dialogSysDept -->

<form id="formResetPwd">
	<input type="hidden" name="id">
	<table class="table table-bordered spd-table">
		<tbody>
			<tr>
				<td style="width:100px;"><label class="spd-label">密码</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="password" name="password" placeholder="必填，长度6~30个字符。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">确认密码</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="password" name="confirmPwd" placeholder="">
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</form>
<!-- /#formResetPwd -->

<table id="tableUserRole" class="table table-bordered table-hover">
	<tbody>
		<tr><td></td><td></td></tr>
	</tbody>
</table>

</jsp:attribute>

<jsp:attribute name="script">
<!-- 页面的JS脚本 -->
<script type="text/javascript">
	$(function(){
		SpdUI.getJSON({
			url: SpdUI.contextPath + '/admin/sysrole/queryAll.do',
			failure: false,
			success: function(data, json){
				var opts = [];
				$.each(data, function(i, v){
					opts.push('<option value="' + v.id + '">' + v.name + '</option>');
				});
				
				$('#formSearch').find('select[name="sysRoleId"]').append(opts.join(''));
			}
		});
		
		$('#tableUserRole').on('click', 'tr', function(){
			var $this = $(this), $checkbox = $this.find(':checkbox'), checked = !$checkbox.prop('checked');
			$checkbox.prop('checked', checked);
			
			checked ? $this.addClass('info') : $this.removeClass('info');
			
			return false;
		});
		
		$('#btnAdd').on('click', function(){
			SpdUI.openFormDialog('#formAdd');
			return false;
		});
		
		$('#btnSearch').on('click', function(){
			$('#table').bootstrapTable('refresh', {
				silent: true
			});
			return false;
		});
		
		$('form input[name="sysDeptName"]').on('click', function() {
			var $this = $(this), $form = $this.closest('form');
			SpdUI.openDialog('#dialogSysDept', {
				form: $form
			});
		});
		
		SpdUI.dialog('#tableUserRole', {
			title: '关联角色',
			closeLabel: '关闭',
			buttons: [{
				label: '全选',
				cssClass: 'btn-primary',
				action: function(dialog, dialogData, dialogBody) {
					dialogBody.find('tr').each(function(){
						var $this = $(this), $checkbox = $this.find(':checkbox');
						$this.addClass('info');
						$checkbox.prop('checked', true);
					});
				}
			},{
				label: '反选',
				cssClass: 'btn-primary',
				action: function(dialog, dialogData, dialogBody) {
					dialogBody.find('tr').each(function(){
						var $this = $(this), $checkbox = $this.find(':checkbox'), checked = !$checkbox.prop('checked');
						$checkbox.prop('checked', checked);
						checked ? $this.addClass('info') : $this.removeClass('info');
					});
				}
			},{
				label: '确定',
				cssClass: 'btn-primary',
				action: function(dialog, dialogData, dialogBody) {
					var sysUserId = dialogData.sysUserId,
						sysRoleIds = [];
					
					dialogBody.find(':checked').each(function(){
						sysRoleIds.push($(this).val());
					});
					
					SpdUI.postJSON({
						url: SpdUI.contextPath + '/admin/sysuser/bindRoles.do',
						data: {
							sysUserId : sysUserId,
							sysRoleIds : sysRoleIds.join(',')
						},
						success: function(data, json){
							SpdUI.alert('保存成功！');
							dialog.close();
						}
					});
				}
			}],
			onhide: function(dialog, dialogData, dialogBody){
				dialogBody.find('#tableUserRole').find('tr').remove();
			},
			onshow: function(dialog, dialogData, dialogBody) {
				SpdUI.getJSON({
					url: SpdUI.contextPath + '/admin/sysrole/queryAll.do',
					success: function(data, json) {
						var html = '';
						$.each(data, function(i, v){
							var tr = '<tr data-role-id="' + v.id + '">';							
							tr += '<td style="width:70px;text-align:center;vertical-align:middle;"><input type="checkbox" value="' + v.id + '"></td>';
							tr += '<td style="text-align:center;vertical-align:middle;">' + v.name + '</td>';							
							tr += '</tr>';
							
							html += tr;
						});
						
						dialogBody.find('tbody').html(html);
						SpdUI.getJSON({
							url: SpdUI.contextPath + '/admin/sysuser/queryUserRoles.do?sysUserId=' + dialogData.sysUserId,
							success: function(data, json) {
								var $tbody = dialogBody.find('tbody');
								$.each(data, function(i, v){
									var $tr = $tbody.children('tr[data-role-id="' + v.sysRoleId + '"]');
									$tr.addClass('info');
									$tr.find(':checkbox').prop('checked', true);
								});
							}
						});
					},
					failure: function(json, message){
						SpdUI.alert('获取角色失败！');
					}
				});
			}
		});
		
		SpdUI.formDialog('#formResetPwd', {
			title: '重置密码',
			validate: {
				password: {
					rule: 'required;length(6~30)',
					msg: '请输入密码，长度6~30个字符。'
				},
				confirmPwd: {
					rule: 'match(password)',
					msg: '两次输入的密码不一致。'
				}
			},
			onsubmit: function($form, formData, dialog, dialogData) {				
				SpdUI.ajaxSubmit($form, {
					url: SpdUI.contextPath + '/admin/sysuser/resetPwd.do',
					success: function(data, json){
						SpdUI.alert('密码重置成功！');
						dialog.close();
					}
				});
			}
		});
		
		SpdUI.dialog('#dialogSysDept', {
			title: '所属部门',
			closeLabel: '清空选择',
			dialogData: {
				treeId: 'sysDeptTree',
				$tree: $('#sysDeptTree')
			},
			buttons: [{
				label: '确定选择',
				cssClass: 'btn-primary',
				action: function(dialog, dialogData, dialogBody) {
					var tree = $.fn.zTree.getZTreeObj(dialogData.treeId),
						nodes = tree.getSelectedNodes(),
						$form = dialogData.form,
						node;
					
					if(nodes && nodes.length > 0){
						node = nodes[0];
						
						if(node.id !== 0){
							$form.find('input[name="sysDeptName"]').val(node.name);
							$form.find('input[name="sysDeptId"]').val(node.id);
						}							
					}
					
					dialog.close();
				}
			}],
			onclose: function(dialog, dialogData, dialogBody) {
				var $form = dialogData.form;
				
				$form.find('input[name="sysDeptName"]').val('');
				$form.find('input[name="sysDeptId"]').val('');
			},
			oncreate: function(dialog, dialogData, dialogBody) {
				dialogData.$tree.height($(window).height() - 300);
			},
			onhide: function(dialog, dialogData, dialogBody){
				$.fn.zTree.destroy(dialogData.treeId);
				dialogData.form.find('input[name="sysDeptName"]').isValid();
			},
			onshow: function(dialog, dialogData, dialogBody) {
				SpdUI.getJSON({
					url: SpdUI.contextPath + '/admin/sysdept/queryForTree.do',
					success: function(data, json){								
						var tmp = [{
							id: 0,
							name: '部门列表',
							open: true
						}];
						
						$.each(data, function(i, v){
							tmp.push({
								id: v.id,									
								parentId: v.parentId,
								code: v.code,
								name: v.name
							});
						});
						
						$.fn.zTree.init(dialogData.$tree, {
							data: {
								simpleData: {
									enable: true,
									pIdKey: 'parentId'
								}
							},
							view: {
								selectedMulti: false
							}
						}, tmp);
					},
					failure: function(json, message){
						SpdUI.alert('加载失败！');
					}
				});
			}
		});
		
		SpdUI.formDialog('#formAdd', {
			title: '添加用户',
			validate: {
				loginName: {
					rule : 'required;length(1~30)',
					msg : '请输入登录名，不超过30个字。'
				},
				truename: {
					rule : 'required;length(1~20)',
					msg : '请输入真实姓名，不超过20个字。'
				},
				password: {
					rule: 'required;length(6~30)',
					msg: '请输入密码，长度6~30个字符。'
				},
				confirmPwd: {
					rule: 'match(password)',
					msg: '两次输入的密码不一致。'
				},
				sysDeptName: {
					rule: 'required',
					msg: '请选择用户所属部门'
				},
				phone: {
					rule: 'mobile'
				},
				email: {
					rule: 'email'
				}/*,
				headimgurl: {
					rule: 'required',
					msg: '请上传头像',
					target: '#formAdd .spd-upload-headimgurl-error'
				}*/
			},
			onsubmit: function($form, formData, dialog, dialogData) {				
				SpdUI.ajaxSubmit($form, {
					url: SpdUI.contextPath + '/admin/sysuser/add.do',
					success: function(data, json){						
						$('#table').bootstrapTable('refresh', {
							silent: true
						});
						dialog.close();
					}
				});
			},
			oncreate: function($form, formData, dialog, dialogData) {
				var $uploader = $form.find('.spd-upload-headimgurl');
				
				SpdUI.imageUploader($uploader, {
					defaultImageUrl: SpdUI.contextPath + '/static/admin/images/avatar.jpg',
					defaultImageCount: 1,
					maxImageCount: 1,
					uploadMessage: '200*200像素以内，不超过500KB，支持jpg/png/gif/bmp格式。',
					imageTools: false,
					uploadLabel: '上传头像',
					server: SpdUI.contextPath + '/admin/upload/file.do',
					uploadSuccess: function(json, file, uploader, $el){
						$form.find('[name="headimgurl"]').val(json.data.url);
					}
				});
			},
			onhide: function($form, formData, dialog, dialogData) {
				SpdUI.resetImageUploader($form.find('.spd-upload-headimgurl'));
			}
		});
		
		SpdUI.formDialog('#formEdit', {
			title: '编辑用户',
			validate: {
				loginName: {
					rule : 'required;length(1~30)',
					msg : '请输入登录名，不超过30个字。'
				},
				truename: {
					rule : 'required;length(1~20)',
					msg : '请输入真实姓名，不超过20个字。'
				},
				sysDeptName: {
					rule: 'required',
					msg: '请选择用户所属部门'
				},
				phone: {
					rule: 'mobile'
				},
				email: {
					rule: 'email'
				}/*,
				headimgurl: {
					rule: 'required',
					msg: '请上传头像',
					target: '#formAdd .spd-upload-headimgurl-error'
				}*/
			},
			onsubmit: function($form, formData, dialog, dialogData) {				
				SpdUI.ajaxSubmit($form, {
					url: SpdUI.contextPath + '/admin/sysuser/update.do',
					success: function(data, json){						
						$('#table').bootstrapTable('refresh', {
							silent: true
						});
						dialog.close();
					}
				});
			},
			oncreate: function($form, formData, dialog, dialogData) {
				var $uploader = $form.find('.spd-upload-headimgurl');
				
				SpdUI.imageUploader($uploader, {
					defaultImageUrl: SpdUI.contextPath + '/static/admin/images/avatar.jpg',
					defaultImageCount: 1,
					maxImageCount: 1,
					uploadMessage: '200*200像素以内，不超过500KB，支持jpg/png/gif/bmp格式。',
					imageTools: false,
					uploadLabel: '上传头像',
					server: SpdUI.contextPath + '/admin/upload/file.do',
					uploadSuccess: function(json, file, uploader, $el){
						$form.find('[name="headimgurl"]').val(json.data.url);
					}
				});
			},
			onshow: function($form, formData, dialog, dialogData) {
				if(formData.headimgurl) {
					SpdUI.addToImageUploader($form.find('.spd-upload-headimgurl'), [SpdUI.contextPath + formData.headimgurl]);
				}
			},
			onhide: function($form, formData, dialog, dialogData) {
				SpdUI.resetImageUploader($form.find('.spd-upload-headimgurl'));
			}
		});		
		
		SpdUI.bootstrapTable('#table', {
			url: SpdUI.contextPath + '/admin/sysuser/queryPage.do',
			columns: [{
				title: '',
				field: 'headimgurl',
				width: 70,
				formatter: function(value, row, index) {
					return value ? '<img style="margin:0;padding:0;width:50px;height:50px;" src="' + SpdUI.contextPath + value + '?_ts=' + new Date().getTime() + '">' : '';
				}
			},{
				title: '登录名',
				field: 'loginName',
				width: 130
			},{
				title: '真实姓名',
				field: 'truename',
				width: 130
			},{
				title: '所属部门',
				field: 'sysDeptName',
				width: 150
			},{
				title: '手机号',
				field: 'phone',
				width: 130
			},{
				title: '状态',
				field: 'status',
				width: 120,
				formatter: function(value, row, index) {
					return {
						0: '<span class="label label-default">已禁用</span>',
						1: '<span class="label label-success">正常</span>'
					}[value];
				}
			},{
				title: '最后登录时间',
				field: 'lastLoginTime',
				width: 180,
				formatter: function(value, row, index) {
					return value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '';
				}
			},{
				title: '最后登录IP',
				field: 'lastLoginIp',
				width: 180
			},{
				title: '操作',
				field: 'id',
				align: 'left',
				formatter: function(value, row, index) {
					var html = '';
					html += '<div class="btn btn-xs btn-primary btn-row-edit">编辑</div>&nbsp;';
					html += '<div class="btn btn-xs btn-warning btn-row-role">关联角色</div>&nbsp;';
					html += '<div class="btn btn-xs btn-info btn-row-reset-pwd">重置密码</div>&nbsp;';
					html += '<div class="btn btn-xs btn-default btn-row-delete">删除</div>';
					return html;
				},
				events: {
					'click .btn-row-role': function(event, value, row, index) {
						SpdUI.openDialog('#tableUserRole', {
							sysUserId: row.id
						});
					},
					'click .btn-row-edit': function(event, value, row, index) {
						SpdUI.openFormDialog('#formEdit', row);
					},
					'click .btn-row-reset-pwd': function(event, value, row, index) {
						SpdUI.openFormDialog('#formResetPwd', {
							id: row.id
						});
					},
					'click .btn-row-delete': function(event, value, row, index) {
						SpdUI.confirm('确定删除用户？', function(){
							SpdUI.getJSON({
								url: SpdUI.contextPath + '/admin/sysuser/delete.do?id=' + row.id,
								success: function(data, json){
									$('#table').bootstrapTable('refresh', {
										silent: true
									});
								}
							});
						});
					}
				}
			}],
			queryParams: function(params) {
				var $form = $('#formSearch');
				params = $.extend(params, SpdUI.formToObject($form));
				return params;
			}
		});
	});
</script>
</jsp:attribute>

</spd:layout>